<template>
    <div>
        <Card class="ivu-mt" dis-hover :bordered="false">
            <Form>
                <FormItem class="ivu-mt ivu-mb" style="max-width: 500px;margin: 0 auto;">
                <Input search @keydown.enter.native.prevent="handleSubmit" placeholder="请输入患者诊疗号搜索患者选择要治疗的项目" size="large" />
                </FormItem>
            </Form>
                    <Tabs class="ivu-mt">
                <TabPane label="待录入(5)" name="tobeTreated">
                    <Form inline>
                        <FormItem>
                            <DatePicker type="date" :clearable="false" placeholder="请输入待治疗日期" v-width="220" /> </DatePicker>
                        </FormItem>
                        <FormItem v-width="300">
                            <Input placeholder="请输入患者姓名或诊疗号" />
                        </FormItem>
                        <FormItem v-width="260">
                            <Select>
                                <Option value="308激光治疗">308激光治疗</Option>
                                <Option value="药浴">药浴</Option>
                            </Select>
                        </FormItem>
                    </Form>
                    <Row :gutter="24">
                        <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                             <tag slot="extra">六诊</tag>
                            <DescriptionList :col="2">
                <Description term="正常剩余：">26</Description>
                <Description term="援助剩余：">58</Description>
            </DescriptionList>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="18" class="ivu-mt-8">脉冲光能磁波治疗...</Col>
                <Col span="6" class="ivu-text-right"><Button type="primary">治疗</Button></Col>
            </Row>
                        </Card>
                        </Col>
                       <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                            <DescriptionList :col="2">
                <Description term="正常剩余：">26</Description>
                <Description term="援助剩余：">58</Description>
            </DescriptionList>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="18" class="ivu-mt-8">药浴</Col>
                <Col span="6" class="ivu-text-right"><Button type="primary">治疗</Button></Col>
            </Row>
                        </Card>
                        </Col>
                                                <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                            <DescriptionList :col="2">
                <Description term="正常剩余：">26</Description>
                <Description term="援助剩余：">58</Description>
            </DescriptionList>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="18" class="ivu-mt-8">308激光治疗...</Col>
                <Col span="6" class="ivu-text-right"><Button type="primary">治疗</Button></Col>
            </Row>
                        </Card>
                        </Col>
                                                <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                            <DescriptionList :col="2">
                <Description term="正常剩余：">26</Description>
                <Description term="援助剩余：">58</Description>
            </DescriptionList>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="18" class="ivu-mt-8">308激光治疗...</Col>
                <Col span="6" class="ivu-text-right"><Button type="primary">治疗</Button></Col>
            </Row>
                        </Card>
                        </Col>
                    </Row>
                    <div class="ivu-mt iuv-text-center">
            <Page :total="100" show-elevator show-sizer show-total></Page>
        </div>
                </TabPane>
                <TabPane label="已录入(8)" name="treated">
                     <Form inline>
                        <FormItem>
                            <DatePicker type="date" :clearable="false" placeholder="请输入待治疗日期" v-width="220" /> </DatePicker>
                        </FormItem>
                        <FormItem v-width="300">
                            <Input placeholder="请输入患者姓名或诊疗号" />
                        </FormItem>
                        <FormItem v-width="260">
                            <Select>
                                <Option>308激光治疗</Option>
                                <Option>药浴</Option>
                            </Select>
                        </FormItem>
                    </Form>
                    <Row :gutter="24">
                        <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                            <Row class="ivu-mb-16">
                                <Col span="12">操作人：刘志</Col>
                                <Col span="12">治疗个数：23</Col>
                                <Col span="24" class="ivu-mt-8">时间：2020-5-01 16:01</Col>
                            </Row>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="14" class="ivu-mt-8">308激光治疗...</Col>
                <Col span="10" class="ivu-pt-8 ivu-text-right"><Button type="warning" size="small">修改</Button> <Button class="ivu-ml-8" size="small">撤消</Button></Col>
            </Row>
                        </Card>
                        </Col>
                              <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                             <Row class="ivu-mb-16">
                                <Col span="12">操作人：刘志</Col>
                                <Col span="12">治疗个数：23</Col>
                                <Col span="24" class="ivu-mt-8">时间：2020-5-01 16:01</Col>
                            </Row>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="14" class="ivu-mt-8">308激光治疗...</Col>
                <Col span="10" class="ivu-pt-8 ivu-text-right"><Button type="warning" size="small">修改</Button> <Button class="ivu-ml-8" size="small">撤消</Button></Col>
            </Row>
                        </Card>
                        </Col>
                                                <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                             <Row class="ivu-mb-16">
                                <Col span="12">操作人：刘志</Col>
                                <Col span="12">治疗个数：23</Col>
                                <Col span="24" class="ivu-mt-8">时间：2020-5-01 16:01</Col>
                            </Row>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="14" class="ivu-mt-8">308激光治疗...</Col>
                <Col span="10" class="ivu-pt-8 ivu-text-right"><Button type="warning" size="small">修改</Button> <Button class="ivu-ml-8" size="small">撤消</Button></Col>
            </Row>
                        </Card>
                        </Col>
                                                <Col span="6">
                        <Card>
                            <p slot="title">张三峰 男 21 </p>
                            <tag slot="extra">710065787</tag>
                            <tag slot="extra">六诊</tag>
                             <Row class="ivu-mb-16">
                                <Col span="12">操作人：刘志</Col>
                                <Col span="12">治疗个数：23</Col>
                                <Col span="24" class="ivu-mt-8">时间：2020-5-01 16:01</Col>
                            </Row>
            <Divider class="ivu-m-0"> </Divider>
            <Row class="ivu-mt-8">
                <Col span="14" class="ivu-mt-8">308激光治疗...</Col>
                <Col span="10" class="ivu-pt-8 ivu-text-right"><Button type="warning" size="small">修改</Button> <Button class="ivu-ml-8" size="small">撤消</Button></Col>
            </Row>
                        </Card>
                        </Col>
                    </Row>
                    <div class="ivu-mt iuv-text-center">
            <Page :total="100" show-elevator show-sizer show-total></Page>
        </div>
                </TabPane>
            </Tabs>
                    </Card>
            <Modal title="选择治疗项目" v-model="model1">
                <h3>张三峰 男 21 <span class="ivu-ml-16">诊疗号：7100787</span></h3>
                <Divider></Divider>
               <CheckboxGroup v-model="formItem.checkbox">
                <Checkbox label="308激光治疗"></Checkbox>
                <Checkbox label="药浴"></Checkbox>
                <Checkbox label="脉冲光能磁波治疗"></Checkbox>
                <Checkbox label="311全仓窄波"></Checkbox>
                <Checkbox label="脉冲光能磁波治疗(全项）"></Checkbox>
                <Checkbox label="红光治疗"></Checkbox>
                <Checkbox label="氦氖激光"></Checkbox>
                <Checkbox label="滚针治疗"></Checkbox>
            </CheckboxGroup>
                    </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                model1: false,
                formItem: {
                    checkbox: []
                }
            }
        },
        methods: {
            handleSubmit () {
                this.model1 = true
            }
        }
    }
</script>
<style scoped>
.ivu-checkbox-group-item {
    margin-bottom:12px;
}
</style>
